<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            position: absolute;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .slider {
            position: absolute;
            inset: 80px 200px 80px 80px;
            /* background-color: #382a2a; */
            border-radius: 20px;
        }

        .slider .slides {
            position: absolute;
            display: flex;
            justify-content: flex-start;
            align-items: end;
            top: 50%;
            transform: translateY(-50%);
            width: 240px;
            height: 320px;
            background-color: #ff2929;
            border-radius: 20px;
            transition: 0.5s;
            background: var(--img);
            background-position: center;
            background-size: cover;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        }

        .slider .slides:nth-child(1) {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: translateY(0);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0);
            /* background-position: center; */
            background-size: cover;
        }

        .slider .slides:nth-child(2) {
            /* calc自己的50%+240px */
            left: calc(50% + 240px);
            background-size: cover;
        }

        .slider .slides:nth-child(3) {
            /* calc自己的50%+240px */
            left: calc(50% + 500px);
            background-size: cover;
        }

        .slider .slides:nth-child(4) {
            /* calc自己的50%+240px */
            left: calc(50% + 760px);
            background-size: cover;
            opacity: 0;
        }

        .button {
            position: absolute;
            bottom: 15px;
            display: flex;
            gap: 20px;
        }

        .button span {
            position: relative;
            width: 50px;
            height: 50px;
            background: #000;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
        }

        .button span::before {
            content: '';
            position: absolute;
            width: 15px;
            height: 15px;
            border-top: 4px solid #fff;
            border-left: 4px solid #fff;
            transform: rotate(315deg) translate(2px, 2px);
        }

        .button span:nth-child(2)::before {
            content: '';
            position: absolute;
            width: 15px;
            height: 15px;
            border-top: 4px solid #fff;
            border-left: 4px solid #fff;
            transform: rotate(135deg) translate(2px, 2px);
        }

        .button span:active {
            opacity: 0.5;
        }

        .content {
            position: relative;
            padding: 20px;
            max-width: 600px;
            transition: 0.25s;
            transition-delay: 0s;
            transform: translateY(40px);
            z-index: 10000;
            opacity: 0;
            color: #fff;
        }

        .content h2 {
            font-size: 4em;
        }

        .slider .slides:nth-child(1) .content {
            opacity: 1;
            transform: translateY(0px);
            transition-delay: 0.5s;
        }

        /* .slider .slides:nth-child(2) .content {
            opacity: 1;
            transform: translateY(0px);
            transition-delay: 0.5s;
        } */

        /* 响应式 */
        @media(max-width: 900px) {

            .slider {
                position: absolute;
                inset: 40px 40px 200px 40px;
            }

            .slider .slides {
                width: 100px;
                height: 100px;
                top: initial;
                bottom: -170px;
            }

            .slider .slides:nth-child(1) {
                top: initial;
                bottom: 0px;
            }

            .slider .slides:nth-child(2) {
                left: 0;
                background-size: cover;
            }

            .slider .slides:nth-child(3) {
                /* calc自己的50%+240px */
                left: 120px;
                background-size: cover;
            }

            .slider .slides:nth-child(4) {
                /* calc自己的50%+240px */
                /* opacity: 1; */
                left: 240px
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="slider">
            <div class="slides" style="--img:url('img/01.jpg')">
                <div class="content">
                    <h2>Winter</h2>
                    <p>We took a photo together</p>
                </div>
            </div>
            <div class="slides" style="--img:url('img/02.jpg')">
                <div class="content">
                    <h2>Autumn</h2>
                    <p>I am your flower buyer</p>
                </div>
            </div>
            <div class="slides" style="--img:url('img/03.jpg')">
                <div class="content">
                    <div class="description">
                        <h2>Summer</h2>
                        <p>My perfect girl</p>
                    </div>
                </div>
            </div>
            <div class="slides" style="--img:url('img/04.jpg')">
                <div class="content">
                    <h2>Spring</h2>
                    <p>Her cosplay very pretty</p>
                </div>
            </div>
        </div>
        <div class="button">
            <span class="prev"></span>
            <span class="next"></span>
        </div>
    </div>
    <script>
        let prev = document.querySelector('.prev')
        let next = document.querySelector('.next')
        let slider = document.querySelector('.slider')
        next.addEventListener('click', function () {
            let slides = document.querySelectorAll('.slides');
            // appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
            slider.appendChild(slides[0])
            // console.log(slides);
        })
        prev.addEventListener('click', function () {
            let slides = document.querySelectorAll('.slides');
            // prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。
            slider.prepend(slides[slides.length - 1])
        })
    </script>
</body>

</html>